    <template>
  <div class="menu-demo">
    <h2>Element UI Menu 菜单示例</h2>
    
    <div class="demo-section">
      <div class="vertical-menu-container">
        <el-menu
          :default-active="activeIndex"
          class="vertical-menu"
          :background-color="menuBg"
          text-color="#fff"
          active-text-color="#ffd04b"
          @open="handleOpen"
          @close="handleClose"
          @select="handleSelect"
          :collapse="isCollapse">
          <template v-for="menu in menuList">
            <!-- 有子菜单的情况 -->
            <el-submenu v-if="menu.children" :index="menu.index" :key="menu.index">
              <template slot="title">
                <i :class="menu.icon"></i>
                <span>{{ menu.title }}</span>
              </template>
              <!-- 递归渲染子菜单 -->
              <template v-for="subMenu in menu.children">
                <el-submenu 
                  v-if="subMenu.children" 
                  :index="subMenu.index" 
                  :key="subMenu.index">
                  <template slot="title">
                    <i :class="subMenu.icon"></i>
                    <span>{{ subMenu.title }}</span>
                  </template>
                  <el-menu-item 
                    v-for="item in subMenu.children"
                    :key="item.index"
                    :index="item.index">
                    <i :class="item.icon"></i>
                    <span>{{ item.title }}</span>
                  </el-menu-item>
                </el-submenu>
                <el-menu-item 
                  v-else 
                  :key="subMenu.index"
                  :index="subMenu.index">
                  <i :class="subMenu.icon"></i>
                  <span>{{ subMenu.title }}</span>
                </el-menu-item>
              </template>
            </el-submenu>
            <!-- 无子菜单的情况 -->
            <el-menu-item v-else :index="menu.index" :key="menu.index">
              <i :class="menu.icon"></i>
              <span slot="title">{{ menu.title }}</span>
            </el-menu-item>
          </template>
        </el-menu>

        <!-- 折叠按钮 -->
        <div class="collapse-btn" @click="toggleCollapse">
          <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MenuDemo',
  
  data() {
    return {
      activeIndex: '1',
      isCollapse: false,
      menuBg: '#304156',
      menuList: [
        {
          index: '1',
          title: '首页',
          icon: 'el-icon-s-home'
        },
        {
          index: '2',
          title: '系统管理',
          icon: 'el-icon-s-tools',
          children: [
            {
              index: '2-1',
              title: '用户管理',
              icon: 'el-icon-user'
            },
            {
              index: '2-2',
              title: '角色管理',
              icon: 'el-icon-s-check'
            },
            {
              index: '2-3',
              title: '权限设置',
              icon: 'el-icon-setting',
              children: [
                {
                  index: '2-3-1',
                  title: '菜单权限',
                  icon: 'el-icon-menu'
                },
                {
                  index: '2-3-2',
                  title: '按钮权限',
                  icon: 'el-icon-thumb'
                }
              ]
            }
          ]
        },
        {
          index: '3',
          title: '内容管理',
          icon: 'el-icon-document'
        },
        {
          index: '4',
          title: '数据统计',
          icon: 'el-icon-s-data'
        }
      ]
    }
  },

  methods: {
    handleSelect(key, keyPath) {
      console.log('选中:', key, keyPath)
    },

    handleOpen(key, keyPath) {
      console.log('展开:', key, keyPath)
    },

    handleClose(key, keyPath) {
      console.log('关闭:', key, keyPath)
    },

    toggleCollapse() {
      this.isCollapse = !this.isCollapse
    }
  }
}
</script>

<style scoped>
.menu-demo {
  padding: 20px;
}

h2 {
  color: #2c3e50;
  border-bottom: 2px solid #1976d2;
  padding-bottom: 10px;
  margin-bottom: 30px;
}

.demo-section {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 20px;
  background: #f5f7fa;
}

/* 垂直菜单容器 */
.vertical-menu-container {
  display: flex;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.vertical-menu {
  width: 200px;
  min-height: 500px;
  transition: all 0.3s;
}

/* 折叠时的宽度 */
.vertical-menu.el-menu--collapse {
  width: 64px;
}

/* 折叠按钮 */
.collapse-btn {
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-left: 1px solid rgba(255,255,255,0.1);
  background: #304156;
  color: #fff;
  transition: all 0.3s;
}

.collapse-btn:hover {
  background: #263445;
}

.collapse-btn i {
  font-size: 20px;
}

/* 菜单项样式优化 */
:deep(.el-menu) {
  border-right: none;
}

:deep(.el-menu-item),
:deep(.el-submenu__title) {
  height: 56px;
  line-height: 56px;
  position: relative;
  transition: all 0.3s;
}

:deep(.el-menu-item.is-active) {
  position: relative;
  background-color: #263445 !important;
}

:deep(.el-menu-item.is-active::before) {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #ffd04b;
}

:deep(.el-menu-item:hover),
:deep(.el-submenu__title:hover) {
  background-color: #263445 !important;
}

:deep(.el-menu-item i),
:deep(.el-submenu__title i) {
  margin-right: 10px;
  width: 24px;
  text-align: center;
  font-size: 18px;
  transition: all 0.3s;
}

/* 响应式处理 */
@media screen and (max-width: 768px) {
  .vertical-menu {
    width: 64px;
  }
  
  .collapse-btn {
    display: none;
  }
}
</style> 